body {

}

html,body{
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

html .vux-header{
  background: rgba(255,255,255,0.95);
  box-shadow: 0 0 10px #ccc;
}
#app{
  overflow-x: hidden;
  height: 100%;

  .weui-search-bar{
    opacity: 0.95;
  }
}

#app-loadingBox{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0,0,0,0.2);
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  .c-loading2{
    width: 60px;
    height:50px;
    text-align: center;
    .clearfix();
    &>div{
      float: left;
      width: 6px;
      height: 100%;
      background: rgba(247, 164, 91,1);
      margin-left: 6px;
      animation: strechdelay 1.2s infinite;
    }
    .line2{
      animation-delay: -1.1s;
    }
    .line3{
      animation-delay: -1.0s;
    }
    .line4{
      animation-delay: -0.9s;
    }
    .line5{
      animation-delay: -0.8s;
    }
  }

  @keyframes strechdelay {
    0%,40%,100%{
      transform: scaleY(0.4);
    }
    20%{
      transform: scaleY(1);
    }
  }
}

@pageinationTheme:#5c5e6c;

.pagination{
  display: inline-block;
  padding-left: 0;
  margin: 20px 0;
  border-radius: 4px;

  > li{
    display: inline;
  }

  > li >a, li > span{
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: @pageinationTheme;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
  }

   > li:first-child > a,> li:first-child > span{
     margin-left: 0;
     border-top-left-radius: 4px;
     border-bottom-left-radius: 4px;
   }

  > li:last-child > a,> li:last-child > span{
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }

  > li > a:hover,
  > li > span:hover,
  > li > a:focus,
  > li > span:focus{
    z-index: 3;
    color: #23527c;
    background-color: #eee;
    border-color: #ddd;
  }

  > .active > a,
  > .active > span,
  > .active > a:hover,
  > .active > span:hover,
  > .active > a:focus,
  > .active > span:focus{
    z-index: 2;
    color: #fff;
    cursor: default;
    background-color: @pageinationTheme;
    border-color: @pageinationTheme;
  }

  > .disabled > span,
  > .disabled > span:hover,
  > .disabled > span:focus,
  > .disabled > a,
  > .disabled > a:hover,
  > .disabled > a:focus{
    color: #777;
    cursor: not-allowed;
    background-color: #fff;
    border-color: #ddd;
  }
}

.pagination{
  &-sm{

    > li > a,> li > span {
      padding: 1px 6px;
      font-size: 12px;
      line-height: 1.5;
    }

    > li:first-child > a,> li:first-child > span {
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
    }

    > li:last-child > a,> li:last-child > span {
      border-top-right-radius: 3px;
      border-bottom-right-radius: 3px;
    }
  }
}

#vux_view_box_body{
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.c-header{
  &-logo{
    width: 1rem;
    position: relative;
    top:-0.2rem;
  }

  &_setting{
    background: #c7a45b!important;

    .left-arrow{
      &:after{
        content: "";
        position: absolute;
        width: 12px;
        height: 12px;
        border: 1px solid #fff;
        border-width: 1px 0 0 1px;
        -webkit-transform: rotate(315deg);
        transform: rotate(315deg);
        top: 8px;
        left: 7px;
      }
    }

    .c-header-title{
      font-size: 18px;
    }
  }
}
.pagefade-enter-active{
  animation-name: slideInRight;
  animation-duration: .5s;
  animation-timing-function: ease-in-out;
  z-index: 1000;
  background: #fbf9fe;
}
.pagefade-leave-active{
  animation-name: fadeOutSmall;
  animation-duration: .5s;
  animation-timing-function: ease-in-out;
  z-index: 999;
  background: #fbf9fe;

}

.pagefadeOut-enter-active{
  animation-name: slideInLeft;
  animation-duration: .5s;
  animation-timing-function: ease-in-out;
  z-index: 1000;
  background: #fbf9fe;
}
.pagefadeOut-leave-active{
  animation-name: fadeOutSmall2;
  animation-duration: .5s;
  animation-timing-function: ease-in-out;
  z-index: 999;
  background: #fbf9fe;
}

@keyframes fadeOutSmall {
  0%{
    opacity: 0;
    transform: translate3d(0,0,0);
  }
  100%{
    opacity: 1;
    transform: translate3d(100vh,0,0);
  }
}

@keyframes fadeOutSmall2 {
  0%{
    opacity: 1;
    transform: translate3d(0,0,0);
  }
  100%{
    opacity: 0;
    transform: translate3d(-100vh,0,0);
  }
}

.page{
  position: absolute;
  top: 0;bottom: 0;left: 0;right: 0;
  background: #fff;
  &-waprrer{
    position: fixed;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
  }
}
